<template>
  <div>
    <router-link to="/user">
      <van-nav-bar left-arrow title="设置个人信息" />
    </router-link>
    <van-form @submit="handleSubmit">
      <van-field v-model="form.nickName" label="用户名"></van-field>

      <van-field v-model="form.balance" disabled label="余额"></van-field>
      <van-field name="uploader" label="头像">
        <template #input>
          <van-uploader accept="jpg,jpeg,png" :max-count="1" v-model="avatar" :after-read="afterRead" />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        nickName: '',
      },
      avatar: [],
    };
  },
  mounted() {
    this.req.get('/auth/userinfo').then((res) => {
      this.form = res.data;
      this.avatar = [
        {
          url: 'http://8.138.102.145/images/' + this.form.avatar,
        },
      ];
    });
  },
  methods: {
    handleSubmit() {
      // 表单提交逻辑
      this.req.put('/user', this.form).then((res) => {
        // if (res.status === 400) {
        //   this.$notify({
        //     type: "danger",
        //     message: res.msg,
        //   });
        //   this.form = {
        //     payPassword: "",
        //     payPasswordAgain: "",
        //     password: "",
        //   };
        // } else {
        //   this.$notify({
        //     type: "success",
        //     message: "设置成功",
        //   });
        //   this.$router.push("/user");
        // }
        this.$notify({
          type: 'success',
          message: '修改成功',
        });
        this.$router.push('/user');
      });
      console.log(this.form);
    },
    afterRead(file) {
      var formData = new FormData();
      formData.append('file', file.file);
      this.req.post('/upload/avatar', formData).then((res) => {
        this.form.avatar = res.data;
      });
    },
  },
};
</script>
